<template>
  <div>
    <h1>
      <i class="iconfont icon-logo"></i>&nbsp;&nbsp;统一身份认证平台（IDS）
      <el-button class="btn-loggout" type="text" @click="logout()">
        <i class="iconfont icon-tuichu"></i>
      </el-button>
    </h1>
  </div>
</template>

<style scoped>
h1 {
  font-size: 1.4rem;
  color: white;
}
h1 .icon-logo {
  font-size: 2rem;
  vertical-align: middle;
}

.btn-loggout {
  float: right;
  color: white;
  padding: 0 1rem;
  height: 60px;
}

.btn-loggout .icon-tuichu {
  font-size: 1.4rem;
}
</style>

<script>
import { mapActions } from 'vuex'

export default {
  name: "MyHeader",
  data() {
    return {};
  },
  methods: {
    ...mapActions([
      'logout', // 将 `this.logout()` 映射为 `this.$store.dispatch('logout')`
    ]),
  }
};
</script>
